<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【内容查找与替换】</title>
    <style>
        div, input {
            display: inline-block;
        }

        input {
            margin: 10px;
            padding: 5px 10px;
        }
    </style>
    <script>
        window.onload = function () {
            var pre = document.getElementById("pre");
            var aft = document.getElementById("aft");
            var btn = document.querySelector("input[type='button']");
            console.log(pre);
            console.log(aft);
            console.log(btn);
            btn.onclick = function () {
                var regx = /(bad)|[\u4e00-\u9fa5]/gi;
                console.log(pre.value.match(regx, "*"));
                var aft_value = pre.value.replace(regx, "*");
                aft.innerHTML = aft_value;
            }
        }
    </script>
</head>
<body>
<div>
    过滤前的内容:<br>
    <textarea rows="10" cols="40" id="pre"></textarea>
</div>
<input type="button" value="过滤">
<div>
    过滤后的内容:<br>
    <textarea rows="10" cols="40" id="aft"></textarea>
</div>
</body>
</html>